<template>
  <div>
    <span v-if="readonly">
      <slot name="formName" :emp="{ FormName: formName, formId: value }">
        {{ formName }}
      </slot>
    </span>
    <template v-else>
      <el-input v-model="formName" :readonly="true" :placeholder="placeholder" :clearable="true">
        <template #append>
          <BaseButton size="small" :icon="dropIcon" @click="clear" />
          <BaseButton size="small" :icon="editIcon" @click="openForm" />
          <BaseButton
            v-if="value != null && type != 2"
            size="small"
            :icon="viewIcon"
            @click="openView"
          />
        </template>
      </el-input>
      <formChiose
        :title="title"
        :company-id="companyId"
        :is-allow-null="isAllowNull"
        :prt-form-classify="prtFormClassify"
        :form-classify="formClassify"
        :form-type="formType"
        v-model:visible="visible"
        v-model="formId"
        @save="save"
      />
    </template>
  </div>
</template>

<script>
import formChiose from './formChiose.vue'
import { Get } from '@/customForm/api/form'
import { useIcon } from '@/hooks/web/useIcon'
import { useUserStoreWithOut } from '@/store/modules/user'
const userStore = useUserStoreWithOut()
export default {
  components: {
    formChiose
  },
  props: {
    title: {
      type: String,
      default: '选择表单'
    },
    formClassify: {
      type: String,
      default: null
    },
    formType: {
      type: Array,
      default: null
    },
    placeholder: {
      type: String,
      default: null
    },
    companyId: {
      type: String,
      default: () => {
        return userStore.comId
      }
    },
    prtFormClassify: {
      type: String,
      default: null
    },
    isAllowNull: {
      type: Boolean,
      default: false
    },
    readonly: {
      type: Boolean,
      default: false
    },
    modelValue: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      dropIcon: useIcon({ icon: 'ep:delete' }),
      editIcon: useIcon({ icon: 'ep:edit' }),
      viewIcon: useIcon({ icon: 'ep:view' }),
      formName: null,
      formId: null,
      type: null,
      preVisible: false,
      visible: false
    }
  },
  computed: {},
  watch: {
    modelValue: {
      handler(val) {
        if (val && val !== '') {
          this.reset()
        } else {
          this.formId = null
          this.form = null
          this.type = null
          this.formName = null
        }
      },
      immediate: true
    }
  },
  mounted() {},
  methods: {
    async reset() {
      this.form = await Get(this.modelValue)
      this.formName = this.form.FormName
      this.type = this.form.FormType
      this.formId = this.modelValue
    },
    clear() {
      this.formName = null
      this.form = null
      this.type = null
      this.$emit('update:modelValue', null)
      this.$emit('change', null, null)
    },
    openView() {
      this.preVisible = true
    },
    closeChoice() {
      this.empVisible = false
    },
    openForm() {
      this.visible = true
    },
    save(e) {
      this.visible = false
      this.form = e.form
      if (this.form == null) {
        this.formName = null
        this.$emit('update:modelValue', null)
        this.$emit('change', null, null)
      } else {
        this.formName = this.form.FormName
        this.type = this.form.FormType
        this.$emit('update:modelValue', e.formId)
        this.$emit('change', e.formId, this.form)
      }
    }
  }
}
</script>
<style scoped>
.icon {
  font-size: 20px;
  margin-right: 5px;
  color: #1890ff;
  cursor: pointer;
}
</style>
